<template>
    <div class="Radio">
        <div class="Radio_content">
            <el-tabs v-model="activePage">
                <el-tab-pane label="广播列表" name="1">
                    <el-row :gutter="20" class="machine_list">
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="(item,index) in 15" :key="index">
                            <BlockList :title="'广播' + (index + 1)" :desc="'设备编号：GB' + (1080 + index)">
                                <div slot="content">
                                    <div class="line1">
                                    	<span>广播状态：</span>
                                    	<span class="radioState">正常</span>
                                    </div>
                                    <div class="line2">
                                    	<span>设备位置：</span>
                                    	<span class="radioState">学院一路</span>
                                    </div>
                                    <div class="line3">
                                    	<span>背景音乐：</span>
                                    	<span class="radioMusic">钢铁洪流进行曲</span>
                                    	<a href="javascript:;" @click="showMsk">设置</a>
                                    </div>
                                    <div class="line4">
                                    	<el-button size="small" type="warning">紧急呼叫</el-button>
                                    </div>
                                </div>
                            </BlockList>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </div>
        <Alert :title="'背景音乐设置'" :isShowMask.sync="isShowMask">
        	<div slot="content">
        		<div class="musicSet">
        			<div class="line line1">
        				<div class="title">
        					定时播放：
        				</div>
        				<div class="content">
        					<el-time-picker
        					    is-range
        					    v-model="timePlay"
        					    range-separator="至"
        					    start-placeholder="开始时间"
        					    end-placeholder="结束时间"
        					    placeholder="选择时间范围">
        					  </el-time-picker>
        				</div>
        			</div>
        			<div class="line line2">
        				<div class="title">
        					音量控制：
        				</div>
        				<div class="content">
        					<el-slider
						      v-model="sound"
						      :step="1"
						      :max="5">
						    </el-slider>
        				</div>
        			</div>
        			<div class="line line3">
        				<div class="title">
        					音乐上传：
        				</div>
        				<div class="content">
        					<el-upload
        					  class="upload-sound"
        					  action="https://jsonplaceholder.typicode.com/posts/"
        					  :limit="1"
        					  accept=".mp3"
        					  :on-exceed="handleExceed"
        					  :file-list="fileList">
        					  <el-button size="small" type="primary">点击上传</el-button>
        					</el-upload>
        				</div>
        			</div>
        			<div class="line line4">
        				<div class="title">
        					自动播放：
        				</div>
        				<div class="content">
        					<el-radio v-model="autoPlay" label="1">是</el-radio>
        					<el-radio v-model="autoPlay" label="2">否</el-radio>
        				</div>
        			</div>
        		</div>
        	</div>
        </Alert>
    </div>
</template>
<script>
import BlockList from '@/components/BlockList.vue'
import Alert from '@/components/Alert.vue'

export default {
    components: {
        BlockList,
        Alert,
    },
    data() {
        return {
            activePage: '1',
            switchData: {},
            timePlay: '',
            sound: 3,
            autoPlay: '1',
            fileList: [{ id: 1,name: '钢铁洪流进行曲.mp3', url: require('../../assets/imgs/prop.jpg') }],
            isShowMask: false,
        }
    },
    methods: {
    	handleExceed() {
    	    this.$alert('文件个数超出限制', '提示', {
    	        confirmButtonText: '确定',
    	    });
    	},
    	showMsk() {
    		this.isShowMask = true
    	}

    }
}
</script>
<style>
.Radio {
    height: 100%;
    width: 100%;
}

.Radio .Radio_content {
    padding: 20px;
}
.Radio .machine_list .el-col {
    margin-bottom: 20px;
}
.Radio .machine_list .line1,
.Radio .machine_list .line2,
.Radio .machine_list .line3,
.Radio .machine_list .line4 {
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.Radio .machine_list .line1 .radioState {
	background-color: #0f0;
	border-radius: 3px;
	height: 28px;
	line-height: 28px;
	padding: 0 10px;
	display: inline-block;
}
.Radio .machine_list .line3 span,
.Radio .machine_list .line3 a {
	display: inline-block;
	vertical-align: middle;
}
.Radio .machine_list .line3 .radioMusic {
	color: #3498db;
	margin-right: 10px;
	max-width: 100px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	vertical-align: middle;
}
.Radio .machine_list .line3 .radioMusic a {
	display: inline-block;
	vertical-align: middle;
}
.Radio .machine_list .line4 {
	text-align: center;
}
.Radio .musicSet {
	padding: 10px 50px;
}
.Radio .musicSet > .line {
	margin: 15px 0;
}
.Radio .musicSet > .line:after {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.Radio .musicSet > .line > .title {
	display: inline-block;
	margin-right: 30px;
	vertical-align: middle;
}
.Radio .musicSet > .line > .content {
	display: inline-block;
	vertical-align: middle;
}
.Radio .musicSet > .line1 .content .el-input__inner {
	width: 280px;
	height: 30px;
	line-height: 30px;
}
.Radio .musicSet > .line1 .content .el-range__icon {
	height: 30px;
	line-height: 30px;
}
.Radio .musicSet > .line1 .content .el-range__close-icon {
	height: 30px;
	line-height: 30px;
}
.Radio .musicSet > .line1 .content .el-range-separator {
	height: 30px;
	line-height: 30px;
}
.Radio .musicSet > .line2 .content {
	width: 280px;
}
.Radio .musicSet > .line3 .content {
	width: 280px;
}
.Radio .musicSet > .line3 .content .upload-sound:after {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.Radio .musicSet > .line3 .content .upload-sound .el-upload {
	display: inline-block;
	vertical-align: middle;
}
.Radio .musicSet > .line3 .content .upload-sound .el-upload-list {
	display: inline-block;
	vertical-align: middle;
	font-size: 0;
}
.Radio .musicSet > .line3 .content .upload-sound .el-upload-list .el-upload-list__item {
	width: 190px;
	margin-top: 0;
	margin-left: 10px;
	display: inline-block;
}
</style>